<template>
	<div style="width:800px;height:520px;">
		<div style="width:100%;float: left;">
			<el-tree :data="data" 
				show-checkbox 
				@check-change="handleSelectionChange" 
				:props="treeProps" 
				ref="tree" 
				node-key="id" 
				:default-checked-keys="defaultCheck" 
				style="height:480px;overflow: auto;">
			</el-tree>
		</div>
		<div style="float: left;width:98%;">
			<div style="margin-top:5px;">
				<el-button style="width:120px" type="primary" @click="submitData" class="buttonSub">确 定</el-button>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				//数据配置
				data: [],
				checkList: [], //选择的菜单列表
				selectRow: null, //选择行
				defaultCheck: [], //默认选中值
				indenterniateList: [], //菜单不定态列表选择状态
				selectKeys: [],
				treeProps: {
					children: 'children',
					label: 'name'
				},
			}
		},
		mounted() {
			//初始化
			//          this.ajax({
			//              url: "SystemMenu/GetMenuTreeNodes?roleId={0}".format(this.selectedRow.id),
			//              type: 'post',
			//              contentType: 'application/json',
			//              success: function(data) {
			//                  console.log(data);
			//                  this.data = data.list;
			//                  this.defaultCheck = data.selectList;
			//                  this.checkList = this.defaultCheck;
			//                  this.indenterniateList = data.intenter;
			//              }
			//          });
		},
		props: ['selectedRow'],
		methods: {
			//操作
//			menuCheck(data, checked, indeterminate) {
//				let unIndetNum = this.indenterniateList.indexOf(data.id);
//				let unCheckNum = this.checkList.indexOf(data.id);
//				if(checked) {
//					//菜单选中
//					if(indeterminate) {
//						if(unCheckNum == -1) {
//							//不存在选中列表中(添加到选中列表中)
//							this.checkList.push(data.id);
//						}
//						if(unIndetNum != -1) {
//							//删除不确定状态值
//							this.indenterniateList.splice(unIndetNum, 1);
//						}
//					} else {
//						//菜单不确定
//						if(unCheckNum == -1) {
//							//存在选中列表中(从选中列表中移除)
//							this.checkList.push(data.id);
//						}
//						if(unIndetNum != -1) {
//							//添加到不确定列表中
//							this.indenterniateList.splice(unIndetNum, 1);
//						}
//					}
//				} else {
//					if(indeterminate) {
//						//不存在选择列表中
//						if(unCheckNum != -1) {
//							this.checkList.splice(unCheckNum, 1); //移除该数据
//						}
//						if(unIndetNum == -1) {
//							//添加到不确定列表中
//							this.indenterniateList.push(data.id);
//						}
//					} else {
//						if(unCheckNum != -1) {
//							this.checkList.splice(unCheckNum, 1);
//						}
//						if(unIndetNum != -1) {
//							this.indenterniateList.splice(unIndetNum, 1);
//						}
//					}
//				}
//			},
			submitData() {

				this.HandleSelectNodes(this.$refs.tree.getCheckedNodes(true));
				this.$emit("setMenu", this.selectKeys, []);

			},
			HandleSelectNodes(nodes) {
				console.log(nodes);
				this.selectKeys = [];
				nodes.forEach((item) => {
					//     let ids = [];
					//     if(item.path[item.path.length - 1] == ","){
					//         ids = item.path.substring(0,item.path.length - 1).split(',');
					//     }else{
					//         ids = item.path.split(',');
					//     }
					//     ids.forEach((id) => {
					//         if (this.selectKeys.indexOf(id) == -1) {
					//             this.selectKeys.push(id)
					//         }
					//     })
					// });
					this.selectKeys.push(item.id);
				});
				console.log(this.selectKeys);
			},
			Refresh() {
				this.ajax({
					url: "tSysMenu/getManageMenus",
					success: function(data) {
						this.getRoleMenu(data);
					}
				});
			},
			getRoleMenu(treeNode) {
				this.ajax({
					url: 'tSysRole/selectRoleMenus?id=' + this.selectedRow.id,
					success: function(data) {
						this.data = treeNode;
						//return;
						this.defaultCheck = data;
						this.checkList = this.defaultCheck;
						this.indenterniateList = [];
					}
				})
			},
			handleSelectionChange(val) {
				console.log(val)
				//this.selectedRow = val;

			},
		},
		watch: {},
		created() {
			//this.Refresh();
		}
	}
</script>
<style>
	.buttonSub {
		/*bottom: 0px ;
        display: block !important;
        position: absolute !important;
        margin-bottom: 5px !important;
        right: 15px;*/
	}
</style>